<template>
    <div class="content">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="downPage">
            <empty v-if="!isList.length"></empty>

            <div class="card" v-for="(item, index) in isList" :key="index">
                <div class="flexsty">
                    <img src="@/assets/index/person.png" style="width: 35px; height: 35px; margin-left: 15px" alt="" />
                    <div style="margin-left: 10px">
                        <div style="color: #545454; margin-bottom: 10px">{{ item.USE_TYPE_NAME }}-{{ item.COMPONENT_TYPE }}</div>
                        <div style="color: #9a9a9a" @click.stop="copy('1111')">
                            {{ item.TUSN }}
                            <!-- <img src="@/assets/copy.png"
                            class="img"> -->
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script lang="ts" setup>
import { allotDetail } from '../../api/posManagement'
import { showToast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const pageNum = ref(0)
const loading = ref(false)
const finished = ref(false)
let isList = ref([])
const copy = (e: string) => {
    navigator.clipboard.writeText(e).then(() => {
        showToast('复制成功')
    })
}
const recordList = () => {
    allotDetail({
        assignBillNo: router.currentRoute.value.query.id,
        currentPage: pageNum.value
    }).then(res => {
        if (res.object.length < 10) {
            finished.value = true
        }
        loading.value = false
        isList.value = isList.value.concat(res.object)
        console.log(isList.value, 'isList.value')
    })
}
const downPage = () => {
    pageNum.value += 1
    recordList()
}
</script>

<style scoped lang="scss">
.content {
    padding: 10px;
    background: #f5f5f5;
}

.card {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
}

.flexsty {
    display: flex;
}

.img {
    width: 15px;
    height: 15px;
    margin-left: 15px;
    vertical-align: bottom;
}
</style>
